<template>
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="挂账日期">
          <el-date-picker
            v-model="form.startDate"
            class="pay_date"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
          ></el-date-picker>----
          <el-date-picker
            style="marigin-left:4%;"
            v-model="form.endDate"
            class="pay_date"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
          ></el-date-picker>
          <el-input class="pay_date" v-model="form.patientName" clearable placeholder="患者姓名"></el-input>
          <el-input class="pay_date" v-model="form.patientMobile" clearable placeholder="手机号"></el-input>
          <!-- <el-input class="pay_date" v-model="form.sources" placeholder="收费项目"></el-input> -->
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th
              style="text-align:center;font-size:18px;"
              colspan="21"
            >{{form.startDate | changeYearMonthDay}} - {{form.endDate | changeYearMonthDay}} 挂账明细</th>
          </tr>
          <tr>
            <th>档案号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机号</th>
            <th>操作类型</th>
            <th>操作时间</th>
            <th>金额</th>
            <th>备注</th>
            <th>操作人员</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.patientInfo.medicalCardCode}}</td>
            <td>{{item.patientInfo.name}}</td>
            <td>{{item.patientInfo.sex | toSex}}</td>
            <td>{{item.patientInfo.age}}
              <!-- <span v-if="item.patientInfo.age>18">{{item.patientInfo.age}}</span>
      <span v-else>{{item.patientInfo.birthday|toTimeContrast}}</span> -->
            </td>
            <td>{{item.patientInfo.mobile}}</td>
            <td></td>
            <td>{{item.gmtCreate}}</td>
            <td>{{item.amount}}</td>
            <td>{{item.patientInfo.remark}}</td>
            <td>{{item.hpMember.memberName}}</td>
            <td>
              <el-link
                v-if="item.remainAmount != item.amount"
                @click="getDetail(item.id)"
                :underline="false"
                type="success"
              >查看记录</el-link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <pager v-model="pager" @change-pagenum="getChartTable"></pager>
    <edit v-model="showEdit" v-if="showEdit" :id="curItem"></edit>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        startDate: "",
        endDate: "",
        patientName: "",
        patientMobile: "",
        type: 1
      },
      curItem:0,
      dwList: [],
      typeList: [],
      orderDayCount: "",
      showEdit:false,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: []
    };
  },
  mounted() {
    // this.getBasic();
    this.form.startDate = this.getDate();
    this.form.endDate = this.getNewDate();
    this.getChartTable();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      let j = Object.assign(th.form, th.pager);
      th.$api
        .getDiscountRecord(j)
        .then(res => {
          if (res.executed) {
            th.tabList = res.dataBody.list;
          }
          th.showLoading(false);
        })
        .catch(err => {
          th.showLoading(false);
        });
    },
    getBasic() {
      let th = this;
      th.getCommonConfigByKey("收费分类").then(res => {
        th.typeList = res;
      });
      th.getCommonConfigByKey("药品剂量单位").then(res => {
        th.dwList = res;
      });
    },
    getDetail(item) {
      let th = this;
      th.curItem = item;
      th.showEdit=true;
    }
  },
  filters:{
    changeYearMonthDay(value){
      let str='';
      if(value){
         str=value.substring(0,4)+'年'+value.substring(5,7)+'月'+value.substring(8,10)+"日"
      } 
     
      return str;
    }
  },
  components:{
      edit:()=>import("../_com/payRecord")
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box{
    min-width: 600px;
    font-size: 12px;
  }
}

.pay_date,
.charge_select {
  width: 10% !important;
  margin-right: 1%;
}
</style>